<template>
  <div>
    <el-card  class="operator-button-card" :body-style="{ padding: '0px' }">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.sale_title') }}</h2>
          <div v-if="isAuth('10400202.MANAGE')">
            <el-dropdown @command="handleCommand">
              <el-button class="el-dropdown-link" size="small" type="primary">
                {{ $t('common.set')
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="sale">{{
                    $t('sale.sale_name')
                  }}</el-dropdown-item>
                  <el-dropdown-item command="preSale">{{
                    $t('sale.pre_sale_name')
                  }}</el-dropdown-item>
                </el-dropdown-menu></template
              >
            </el-dropdown>
          </div>
        </div></template
      >
      <el-form class="center" size="small" label-width="250px">
        <div v-if="tableData.length === 0">
          <el-empty description="" :image-size="100">
            <el-dropdown
              v-if="isAuth('10400202.MANAGE')"
              @command="handleCommand"
            >
              <span class="el-dropdown-link" style="color: #409eff">
                {{ $t('sale.click_choose_sale')
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="sale">{{
                    $t('sale.sale_name')
                  }}</el-dropdown-item>
                  <el-dropdown-item command="preSale">{{
                    $t('sale.pre_sale_name')
                  }}</el-dropdown-item>
                </el-dropdown-menu></template
              >
            </el-dropdown>
          </el-empty>
        </div>
        <div v-else class="notifyTable">
          <el-card
            shadow="never"
            :body-style="{ padding: '0px' }"
            :page-size="pageSize"
            :total="rows"
            :current-page="pageNo"
            @current-change="currentChangeHandle"
          >
            <el-table
              :data="tableData"
              style="width: 96%; background-color: white; margin: 0px auto"
            >
              <el-table-column
                :label="$t('sale.sale_type')"
                prop="saleType"
                
              >
                <template v-slot="{ row }">
                  <el-tag
                    type="primary"
                    v-if="row.saleType === 'OPERATOR_SALE_ID'"
                    >{{ $t('sale.sale_name') }}</el-tag
                  >
                  <el-tag
                    type="success"
                    v-if="row.saleType === 'OPERATOR_PRE_SALE_ID'"
                    >{{ $t('sale.pre_sale_name') }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('user.username')"
                prop="username"
                
              />
              <el-table-column
                :label="$t('user.contact_name')"
                prop="name"
                
              />
              <el-table-column
                :label="$t('user.status')"
                prop="status"
                
              >
                <template v-slot="{ row }">
                  <el-tag type="warning" v-if="row.status === 0">{{
                    $t('operator.locked')
                  }}</el-tag>
                  <el-tag type="success" v-if="row.status === 1">{{
                    $t('operator.valid')
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                
                
                :label="$t('common.operate')"
                width="100px"
              >
                <template v-slot="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="$t('common.deleteBtn')"
                    placement="top"
                  >
                    <el-button
                      v-if="isAuth('10400202.MANAGE')"
                      type="text"
                      style="color: #8c939d"
                      icon="el-icon-delete"
                      @click="deleteHandle(scope.row)"
                    />
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-form>
    </el-card>
    <sale-user-list
      v-if="saleUserListVisible"
      :operator-id="operatorId"
      :sale-type="saleType"
      ref="userList"
      @close="fetchData"
    ></sale-user-list>
  </div>
</template>

<script>
import SaleUserList from './sale-user-list.vue'
import { delSales, getSalesList } from '@/api'
import { isAuth } from '@/utils'

export default {
  computed: {},
  components: {
    SaleUserList
  },
  data() {
    return {
      saleType: null,
      operatorId: this.$route.params.operatorId,
      saleUserListVisible: false,
      tableData: [],
      pageNo: 1,
      pageSize: 8,
      rows: 0
    }
  },
  created() {
    this.saleUserListVisible = false
    this.fetchData()
  },
  methods: {
    isAuth,
    statusFilter(status) {
      const statusMap = {
        0: this.$t('operator.locked'),
        1: this.$t('operator.valid')
      }
      return statusMap[status]
    },
    handleCommand(type) {
      if (type === 'sale') {
        this.saleType = 'OPERATOR_SALE_ID'
        this.saleUserListVisible = true
        this.$nextTick(() => {
          this.$refs.userList.init(this.saleType)
        })
      } else if (type === 'preSale') {
        this.saleType = 'OPERATOR_PRE_SALE_ID'
        this.saleUserListVisible = true
        this.$nextTick(() => {
          this.$refs.userList.init(this.saleType)
        })
      }
    },
    fetchData() {
      this.saleUserListVisible = false
      getSalesList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        platCode: 'TOMS',
        operatorId: this.operatorId
      })
        .then((res) => {
          this.tableData = res.data
          this.rows = res.rows
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    deleteHandle(row) {
      this.$confirm(
        this.$t('sale.del_tip', {
          saleType:
            row.saleType === 'OPERATOR_PRE_SALE_ID'
              ? this.$t('sale.pre_sale_name')
              : this.$t('sale.sale_name'),
          email: row.email
        }),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        delSales(this.operatorId, row.characterAncillaryId)
          .then((res) => {
            this.fetchData()
          })
          .catch((err) => {
            this.$confirmError(err)
          })
      })
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.fetchData()
    }
  }
}
</script>
<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
